﻿<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.msgbox - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.ajp-msgbox > .middle > .text { font: 12px Trebuchet MS; }

</style>

<script>

$(document).ready(function () {

	$('#ex1').click(function () {
		$().ajp$msgbox(new Date().toString())
	})
	$('#ex2').click(function () {
		$().ajp$msgbox('Input something:', {
				type: 'prompt',
				buttons: [
					{ value: 'OK' },
					{ value: 'Cancel', type: 'cancel' }
				]
			}, function (btn, value) {
				$().ajp$msgbox((btn === false ? 'Canceled.' : 'Your text: ' + value))
			}
		)
	})
	$('#ex3').click(function () {
		$().ajp$msgbox('<p>Please enter your login and password or <a href="#">register</a>.</p>', {
			type: 'prompt',
			buttons: [
				{ value: 'OK' },
				{ value: 'Cancel', type: 'cancel' }
			],
			inputs: [
				{ label: 'Login:', required: true },
				{ label: 'Password:', required: true, type: 'password' }
			]
		}, function (btn, username, password) {
			console.log(btn, username, password)
		})
	})

	$('#ex4').click(function () { $().ajp$msgbox('Alert', { type: 'alert' }) })
	$('#ex5').click(function () { $().ajp$msgbox('Error', { type: 'error' }) })
	$('#ex6').click(function () { $().ajp$msgbox('Info (default)', { type: 'info' }) })

	$('#ex7').click(function () {
		$().ajp$msgbox('Do you like this plugin?',
			{
				type: 'confirm',
				buttons: [ { value: 'Yes' }, { value: 'No' } ]
			}, function (res) {
				$().ajp$msgbox('Your answer: ' + res)
			})
	})

	$('#ex8').click(function () { $().ajp$msgbox('Just a message (without any icon).', { type: 'none' }) })

	$('#ex9').click(function () { $().ajp$msgbox(''
		+ '<p>Lorem ipsum dolor sit amet, mel odio alia verear an. Ad vim reque labores, mel habemus tibique probatus ut. Vel ei oratio accumsan, no mei malis iudico oratio. Fuisset petentium gubergren per cu, id harum eirmod quo. Est cu duis forensibus reprimique, primis nusquam neglegentur ne pri. Quis novum movet an eum. Mei id erat noluisse urbanitas.</p>'
		+ '<p>Vim in facer possit inermis, sea hinc prodesset ad. Et ipsum denique qui, quidam quodsi pericula vis te. Quo melius scripta an. Te vel petentium gubergren, ei his epicurei patrioque. Alia zril at est, qui graeci oblique moderatius ea.</p>'
		+ '<p>Te graeci gubergren euripidis his, ea sit quas melius praesent. Dicat nihil maiorum ut eos. In sed putent prompta, dolor interpretaris conclusionemque mel ei, eius partem soluta sed at. Oblique platonem ad duo, sed an autem fugit. Mel omnesque probatus adipisci at. Eu fabulas senserit eum, eos no possim nusquam honestatis.</p>'
		, { type: 'none', classes: 'ajp-msgbox-wide' }) })
})

</script>

</head>

<body>
	<button id="ex1">Current date and time</button>

	<button id="ex6">Info</button>
	<button id="ex4">Alert</button>
	<button id="ex5">Error</button>
	<button id="ex2">Prompt</button>
	<button id="ex7">Confirm</button>
	<button id="ex8">None</button>
	<button id="ex9">Wide</button>

	<button id="ex3">Login</button>
</body>